<template>
	<view class="main">
		<van-tabs v-model:active="active" title-active-color="#2D75D7" color="#2D75D7" @change="onClickTab">
			<van-tab v-for="(item, index) in tabList" :title="item.title" :key="index">
				<view class="form-box" v-if="active==0">
					<van-cell-group inset>
						<view class="form-title">
							<van-field v-model="form.title" label="会议标题" readonly label-align="top" />
						</view>
						<view class="form-title">
							<van-field v-model="form.content" label="正文" readonly label-align="top" />
						</view>
					</van-cell-group>
					<van-cell-group inset style="margin-top: 10px;">
						<van-field v-model="form.startTime" readonly label="会议开始时间" input-align="right" />
						<van-field v-model="form.endTime" readonly label="会议结束时间" input-align="right" />
						<van-field v-model="form.meetAddress" readonly label="会议地点" input-align="right" />
						<van-field v-model="form.readerNames" class="radio-class" readonly label="参会人员" input-align="right" />
						<van-field v-model="form.meetLeader" readonly label="会议主持人" input-align="right" />
						<van-field v-model="form.meetNumber" readonly label="参会人数" input-align="right" />
						<van-field v-model="form.meetAttender" readonly label="其他参会人员" input-align="right" />
						<van-field v-model="form.memo" readonly label="备注" input-align="right" />
					</van-cell-group>
					<van-cell-group v-if="form.auditItems&&form.auditItems.length>0" class="top-flex" inset style="margin-top: 10px;">
						<text>审批意见</text>
						<van-field v-for="item, i in form.auditItems" class="footer-info" v-model="item.operatorName+' '+item.completeTime" readonly :label="item.memo" input-align="right" :key="i" />
					</van-cell-group>
					<van-cell-group v-if="type=='1'&&way=='2'" class="footer-info" inset style="margin-top: 10px;">
						<view class="form-content">
							<van-field v-model="form.auditMemo" label="审批意见" rows="4" label-align="top" autosize type="textarea" />
						</view>
					</van-cell-group>
					<van-cell-group v-if="type=='1'&&way=='1'" inset style="margin-top: 10px;">
						<view>
							<van-field class="radio-class" v-model="form.businessStatus" required label="选择路径"  label-align="top">
								<van-radio-group v-model="form.businessStatus" direction="horizontal" slot="input">
								  <van-radio name="UNDO">送审</van-radio>
								  <van-radio name="DONE">发布通知</van-radio>
								</van-radio-group>
							</van-field>
							<view v-if="form.businessStatus=='UNDO'" style="display: flex;flex-wrap: wrap;">
								<view class="btn-plus" v-for="item, i in personList" :key="i">
									<p>
										<van-button icon="manager" round />
										<text>{{item.name}}</text>
										<image src="/static/docmumentImg/icdelt.png" class="icdelt"
											@click="deletPerson(i, item)"></image>
									</p>
								</view>
								<view class="btn-plus" @click="getPerson()">
									<p>
										<van-button icon="plus" round />
										<text>添加审批人</text>
									</p>
								</view>
							</view>
						</view>
					</van-cell-group>
					<van-cell-group v-if="way=='0'&&receiptStatus=='UNDO'" inset style="margin-top: 10px;">
						<view style="display: flex;flex-direction: column;">
							<van-field required label="回执信息"  label-align="top" class="radio-class">
								<view slot="input" class="form-content" style="width: 100%;">
									<van-radio-group v-model="form.meetAttendStatus" direction="horizontal">
									  <van-radio name="0">参加会议</van-radio>
									  <van-radio name="1">请假</van-radio>
									</van-radio-group>
									<van-field v-if="form.meetAttendStatus=='1'" v-model="form.receiptMemo" placeholder="请填写不能参加会议的原因" rows="4" autosize type="textarea" />
								</view>
							</van-field>
						</view>
					</van-cell-group>
					<van-cell-group v-if="way=='0'&&receiptStatus=='DONE'" inset style="margin-top: 10px;">
						<view style="display: flex;flex-direction: column;">
							<van-field label="回执信息"  label-align="top" class="radio-class">
								<view slot="input" class="form-content" style="width: 100%;">
									<van-field v-model="form.receiptMemo" readonly autosize />
								</view>
							</van-field>
						</view>
					</van-cell-group>
					<van-cell-group v-if="way=='0'&&imgList&&imgList.length>0" inset style="margin-top: 10px;padding: 10px;">
						<image :src="it.previewURL" class="fr-img" v-for="(it, index) in imgList" @click="previewImgs(imgList, index)"
							:key="it.previewURL"></image>
					</van-cell-group>
					<van-cell-group v-if="way=='0'&&wordList&&wordList.length>0" inset class="attch-flex" style="margin-top: 10px;">
						<text>附件</text>
						<van-field class="attch-class" v-for="item, index in wordList" readonly :label="item.fileName" input-align="right">
							<image slot="left-icon" src="/static/docmumentImg/ico-pdf.png" class="fileico-img" v-if="isFileOfType(item.extName, 'pdf')"></image>
							<image slot="left-icon" src="/static/docmumentImg/ico-world.png" class="fileico-img" v-else-if="isFileOfType(item.extName, 'document')"></image>
							<image slot="left-icon" src="/static/docmumentImg/ic-img.png" class="ic-imgxz" v-else-if="isFileOfType(item.extName, 'image')"></image>
							<uv-icon slot="left-icon" name="folder" class="fileico-down" size="25" color="#2D75D7" v-else></uv-icon>
							
							<image slot="right-icon" src="/static/docmumentImg/ic-dowload.png" class="ic-dowload"
								@click="downloadFileFn(item.previewURL, item.fileName)"></image>
						</van-field>
					</van-cell-group>
					<van-cell-group inset style="margin-top: 10px;">
						<van-field class="footer-info" v-model="form.deptName" readonly label="承办部门" input-align="right" />
						<van-field class="footer-info" v-model="form.createTime" readonly label="申请时间" input-align="right" />
						<van-field class="footer-info" v-model="form.createBy" readonly label="承办人" input-align="right" />
						<van-field class="footer-info" v-model="form.telephone" readonly label="联系电话" input-align="right" />
					</van-cell-group>
					<view v-if="type=='1'||way=='0'&&receiptStatus=='UNDO'" class="footer">
						<van-button v-if="way=='1'" block color="#2D75D7" plain native-type="save" @click="onSubmit(0)">
							保存
						</van-button>			
						<van-button block color="#2D75D7" native-type="submit" @click="onConfirm()">
							提交
						</van-button>
					</view>
				</view>
				<view class="form-box" v-else-if="active==1">
					<view v-if="processList.length>0">
						<van-cell-group v-for="item, index in processList" inset style="margin-top: 10px;">
							<van-field v-model="item.name" readonly label="处理环节" input-align="right" />
							<van-field v-model="item.operatorName" readonly label="处理人" input-align="right" />
							<van-field v-model="item.createTime" readonly label="开始时间" input-align="right" />
							<van-field v-model="item.completeTime" readonly label="完成时间" input-align="right" />
							<van-field v-if="item.itemType=='AUDIT_DONE'" v-model="item.memo" readonly label="审批意见" input-align="right" />
						</van-cell-group>
					</view>
					<view v-else class="non-text">
						暂无数据
					</view>
				</view>
				<view class="form-box" v-else-if="active==2">
					<van-cell-group v-if="fileList.length>0" inset style="margin-top: 10px;">
						<van-field class="attch-class" v-for="item, index in fileList" readonly :label="item.fileName" input-align="right">
							<image slot="left-icon" src="/static/docmumentImg/ico-pdf.png" class="fileico-img" v-if="isFileOfType(item.extName, 'pdf')" @click="showPreview(item.extName, index, item.previewURL)"></image>
							<image slot="left-icon" src="/static/docmumentImg/ico-world.png" class="fileico-img" v-else-if="isFileOfType(item.extName, 'document')"></image>
							<image slot="left-icon" src="/static/docmumentImg/ic-img.png" class="ic-imgxz" v-else-if="isFileOfType(item.extName, 'image')" @click="showPreview(item.extName, index, item.previewURL)"></image>
							<uv-icon slot="left-icon" name="folder" class="fileico-down" size="25" color="#2D75D7" v-else></uv-icon>
							
							<image slot="right-icon" src="/static/docmumentImg/ic-dowload.png" class="ic-dowload"
								@click="downloadFileFn(item.previewURL, item.fileName)"></image>
						</van-field>
					</van-cell-group>
					<view v-else class="non-text">
						暂无数据
					</view>
				</view>
				<view class="form-box" v-else-if="active==3">
					<van-cell-group v-if="replyList&&replyList.length>0" inset style="margin-top: 10px;">
						<van-cell :value-class="item.receiptStatus=='UNDO'?'rt':item.meetAttendStatus=='1'?'yt':'gt'" v-for="item, index in replyList" :value="getReceipt(item)" :title="item.readerName" />
					</van-cell-group>
					<view v-else class="non-text">
						暂无数据
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
import { attachList, auditInfo, auditItemList, auditSave, noticeInfoInfo, taskInfoInfo, taskInfoSave, updateReadStatus } from '../../../api/meetingNoticeApi'
import { filterNull } from '../../../utils/format'
import { downloadFile, filterImageData, previewImgs, isFileOfType, previewPDF, isImageExtension } from '../../../utils/public'
export default {
	data() {
		return {
			active: 0,
			tabList: [
				{ title: '基本信息' },
				{ title: '办理记录' },
				{ title: '附件信息' },
			],
			id: '',
			type: '',
			way: '', //0 我参与的, 1 我发起的, 2 我审批的
			form: {},
			processList: [],
			fileList: [],
			replyList: [],
			businessStatus: '',
			personList: [],
			receiptStatus: '',
			imgList: [],
			wordList: []
		}
	},
	onShow() {
		this.getPersonInfo()
	},
	onLoad(e) {
		this.id = e.id
		this.type = e.type
		this.way = e.way
		this.init()
	},
	methods: {
		getPersonInfo(){
			let personInfo = uni.getStorageSync('selectPsersonData')
			if(personInfo){
				personInfo = JSON.parse(personInfo)
				this.form.auditorIds = personInfo.ids
				this.form.auditorNames = personInfo.names
				this.form.auditorAccounts = personInfo.mobiles
				console.log('personinfo', personInfo)
				this.personList = personInfo.personList
				uni.removeStorageSync('selectPsersonData')
			}
		},
		init(){
			if(this.way=='1'){
				this.tabList.push({ title: '会议回执' })
				auditInfo({id: this.id}).then(res=>{
					console.log('res', res.data)
					this.form = res.data
					this.businessStatus = this.form.businessStatus
					this.replyList = res.data.noticeInfos
					console.log('form', this.form)
				})
			}else if(this.way=='2'){
				taskInfoInfo({id: this.id}).then(res=>{
					console.log('res', res.data)
					this.form = res.data.auditInfo
					this.businessStatus = this.form.businessStatus
					console.log('form', this.form)
				})
			}else if(this.way=='0'){
				noticeInfoInfo({id: this.id}).then(res=>{
					console.log('res', res.data)
					this.form = res.data.auditInfo
					this.businessStatus = this.form.businessStatus
					this.receiptStatus = res.data.receiptStatus
					console.log('form', this.form)
					if(res.data.receiptStatus=='NONE'){
						return this.onSubmit()
					}else if(res.data.receiptStatus=='DONE'){
						this.form.receiptMemo = res.data.receiptMemo=='参会'?res.data.receiptMemo:'请假，'+res.data.receiptMemo
					}
					this.onClickTab(2)
				})
			}
		},
		onClickTab(name){
			if(name==1){
				auditItemList(this.form.businessId).then(res=>{
					console.log('res', res)
					this.processList = [...res.data]
				})
			}else if(name==2){
				attachList(this.form.businessId).then(res=>{
					console.log('res', res)
					this.fileList = [...res.data]
					let filesdata = filterImageData(this.fileList)
					this.imgList = filesdata.images || []
					this.wordList = filesdata.others || []
				})
			}
			console.log('name', name)
		},
		// 去选择人
		getPerson() {
		    uni.navigateTo({
		        url: '/documentManagement/selectPerson/circulate'
		    });
		},
		onConfirm(){
			let _this = this
			uni.showModal({
				title: '提示',
				content: '您是否确认提交?',
				success: (res) => {
				    if (res.confirm) {
				        return _this.onSubmit(1)
				    }
				}
			})
		},
		onSubmit(type){
			if(type==0){
				this.form.operateType = 'draft'
			}else{
				this.form.operateType = 'complete'
			}
			if(this.way=='1'){
				this.form.publishScope = 'DESIGNEE'
				this.form.receiptStatus = 1
				this.form.isNew = false
				const params = filterNull(this.form)
				auditSave(params).then(res=>{
					console.log('res', res)
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 800)
				})
			}else if(this.way=='2'){
				const params = {
					auditMemo: this.form.auditMemo,
					id: this.id,
					operateType: this.form.operateType
				}
				taskInfoSave(params).then(res=>{
					console.log('res', res)
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 800)
				})
			}else if(this.way=='0'){
				const params = {
					noticeId: this.id,
					receiptMemo: this.form.meetAttendStatus=='1'?this.form.receiptMemo:'参会',
					meetAttendStatus: this.form.meetAttendStatus || ''
				}
				updateReadStatus(params).then(res=>{
					if(type){
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 800)
					}
				})
			}
		},
		// 下载
		downloadFileFn(url, name) {
			downloadFile(url, name);
		},
		// 查看附件信息--点击预览图片 --pdf预览
		showPreview(extName, index, previweurl) {
			// 如果是图片类型
			if (isImageExtension(extName)) {
				previewImgs(filterImageData(this.fileList).showimages, index);
			} else {
				// 如果不是图片预览就是pdf预览
				previewPDF(previweurl);
			}
		},
		previewImgs(list, index){
			const imgs = list.map(item => item.previewURL);
			
			previewImgs(imgs, index);
		},
		isFileOfType,
		deletPerson(index, name) {
			// 从数组中移除指定索引的审批人
			this.personList.splice(index, 1);
			// 更新 form 中的审批人信息
			const ids = this.form.auditorIds ? this.form.auditorIds.split(',') : [];
			const names = this.form.auditorNames ? this.form.auditorNames.split(',') : [];
			ids.splice(index, 1);
			names.splice(index, 1);
			this.form.auditorIds = ids.join(',');
			this.form.auditorNames = names.join(',');
		},
		getReceipt(row){
			if(row.receiptStatus=='UNDO'){
				return row.receiptStatusName
			}else if(row.receiptStatus=='DONE'&&row.meetAttendStatus==1){
				return '请假' + row.receiptMemo
			}else{
				return row.receiptMemo
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	background-color: #f5f5f5;
	min-height: 100vh;
}
.form-box{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 10px;
	margin-bottom: 50rpx;
	border-bottom: 0;
	min-height: 0;
	padding-bottom: 100px;
}
.form-title{
	::v-deep .van-field__control{
		font-size: 17px;
		padding: 7px 0;
	}
	::v-deep .van-cell{
		flex-direction: column;
	}
	::v-deep .van-field__body{
		border-bottom: 1px solid #efefef;
	}
}
.form-content{
	::v-deep .van-cell{
		flex-direction: column;
	}
	::v-deep .van-field__body{
		border: 1px solid #efefef;
		margin-top: 10px;
		padding: 5px;
	}
}
.footer{
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 95%;
	padding: 10px;
	display: flex;
	justify-content: space-around;
	::v-deep .van-button--block{
		width: 48%;
	}
}
.non-text{
	color: #868e96;
	text-align: center;
}
.btn-plus{
	display: flex;
	padding: 10px;
	p {
		display: flex;
		flex-direction: column;
		align-items: center;
		text{
			font-size: 14px;
			color: #999999;
			margin-top: 5px;
		}
	}
}
.attch-class{
	::v-deep .van-field__label{
		width: 75%
	}
}
.top-flex{
	padding: 10px 0;
	text {
		padding: 0 10px;
		font-size: 17px;
		color: #999999;
	}
	::v-deep .van-cell{
		display: flex;
		flex-direction: column;
	}
}
.attch-flex {
	text {
		padding: 0 10px;
		font-size: 17px;
		color: #999999;
	}
}
.rt{
	color: #FF6060
}
.yt{
	color: #CE9410
}
.gt{
	color: #63C945
}
.radio-class{
	display: flex;
	flex-direction: column;
	::v-deep .van-radio-group{
		margin-top: 10px
	}
	::v-deep .van-radio{
		margin-right: 40px;
	}
}
.footer-info{
	::v-deep .van-field__control{
		color: #555555
	}
}
.fr-img {
	width: 100%;
	// max-height: 422rpx;
	margin-bottom: 20rpx;
}
.fr-img:last-child {
	margin-bottom: 0;
}
.fileico-img {
	width: 52rpx;
	height: 52rpx;
	margin-right: 26rpx;
}

.ic-dowload {
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}

.ic-imgxz {
  width: 56rpx !important;
  height: 42rpx !important;
  margin-right: 10rpx;
}
.icdelt{
    position: relative;
    width: 20px;
    height: 20px;
    top: -80%;
    right: -40%;
}
</style>
